<div ng-controller="JVM.DiscoveryController">

  <div class="row-fluid">

    <div class="pull-right">
      <button class="btn" ng-click="fetch()" title="Refresh"><i class="icon-refresh"></i></button>
    </div>
    <div class="pull-right">
      <input class="search-query" type="text" ng-model="filter" placeholder="Filter...">
    </div>

    <script type="text/ng-template" id="authPrompt">
      <div class="auth-form">
        <form name="authForm">
          <input type="text"
                 class="input-small"
                 placeholder="Username..."
                 ng-model="agent.username"
                 required>
          <input type="password"
                 class="input-small"
                 placeholder="Password..."
                 ng-model="agent.password"
                 required>
          <button ng-disabled="!authForm.$valid"
                  ng-click="connectWithCredentials($event, agent)"
                  class="btn btn-success">
            <i class="icon-share"></i> Connect
          </button>
          <button class="btn" ng-click="closePopover($event)"><i class="icon-remove"></i></button>
        </form>
      </div>
    </script>

  </div>

  <div class="row-fluid">

    <div ng-show="discovering">
      <p></p>

      <div class="alert alert-info">
        <i class="icon-spinner icon-spin"></i> Please wait, discovering agents ...
      </div>
    </div>

    <div ng-hide="discovering">
      <div ng-hide="agents">
        <p></p>

        <div class="alert alert-warning">
          No agents discovered.
        </div>
      </div>
      <div ng-show="agents">
        <ul class="discovery zebra-list">
          <li ng-repeat="agent in agents track by $index" ng-show="filterMatches(agent)">

            <div class="inline-block">
              <img ng-src="{{getLogo(agent)}}">
            </div>

            <div class="inline-block">
              <p ng-hide="!hasName(agent)">
              <span class="strong"
                    ng-show="agent.server_vendor">
                {{agent.server_vendor}} {{agent.server_product.titleize()}} {{agent.server_version}}
              </span>
              </p>
            <span ng-class="getAgentIdClass(agent)">
              <strong ng-show="hasName(agent)">Agent ID: </strong>{{agent.agent_id}}<br/>
              <strong ng-show="hasName(agent)">Agent Version: </strong><span ng-hide="hasName(agent)"> Version: </span>{{agent.agent_version}}</span><br/>
              <strong ng-show="hasName(agent)">Agent Description: </strong><span
                ng-hide="hasName(agent)"> Description: </span>{{agent.agent_description}}</span><br/>

              <p ng-hide="!agent.url"><strong>Agent URL: </strong><a ng-href="{{agent.url}}"
                                                                     target="_blank">{{agent.url}}</a>
              </p>
            </div>

            <div class="inline-block lock" ng-show="agent.secured">
              <i class="icon-lock" title="A valid username and password will be required to connect"></i>
            </div>

            <div class="inline-block" ng-hide="!agent.url">
              <div class="connect-button"
                   ng-click="gotoServer($event, agent)"
                   hawtio-template-popover
                   content="authPrompt"
                   trigger="manual"
                   placement="auto"
                   data-title="Please enter your username and password">
                <i ng-show="agent.url" class="icon-play-circle"></i>
              </div>
            </div>

          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
